<template>
  <div class="hello">
    <el-dialog
      title="页面配置"
      width="80%"
      :close-on-click-modal="false"
      :visible.sync="interactiveVisible"
    >
      <div class="f-submit">
        <el-button type="primary" class="f-save" @click="fSubmit"
          >确定生成</el-button
        >
      </div>
      <el-row>
        <el-col class="g-form-box elCol-one" :span="4">
          <div style="font-size: 20px; font-weight: bold">控件选择</div>
          <div class="f-type">
            <div class="f-item">
              <div>
                <img
                  style="width: 20px; height: 20px"
                  src="../../../assets/imgEach/rognqi.png"
                  alt=""
                />
                输入型组件
              </div>
              <div
                @click="addFormItem(5)"
                class="l-section"
                style="cursor: pointer"
                @mousedown="addDraggable"
                @dragstart="addStartDrag(5)"
                @dragend="pDragEnd($event)"
                :draggable="isDraggable"
              >
                <img
                  style="width: 20px; height: 25px"
                  src="../../../assets/imgEach/danhang.png"
                  alt=""
                />
                输入框
              </div>
              <div>
                <img
                  style="width: 20px; height: 20px"
                  src="../../../assets/imgEach/rognqi.png"
                  alt=""
                />
                选择型组件
              </div>
              <div
                @click="addFormItem(0)"
                class="l-section"
                @mousedown="addDraggable"
                @dragstart="addStartDrag(0)"
                @dragend="pDragEnd($event)"
                :draggable="isDraggable"
              >
                <img
                  style="width: 20px; height: 20px"
                  src="../../../assets/imgEach/onechoice.png"
                  alt=""
                />
                单选框
              </div>
              <div
                @click="addFormItem(1)"
                class="l-section"
                @mousedown="addDraggable"
                @dragstart="addStartDrag(1)"
                @dragend="pDragEnd($event)"
                :draggable="isDraggable"
              >
                <img
                  style="width: 20px; height: 25px"
                  src="../../../assets/imgEach/duochoice.png"
                  alt=""
                />
                多选框
              </div>
              <div
                @click="addFormItem(2)"
                class="l-section"
                @mousedown="addDraggable"
                @dragstart="addStartDrag(2)"
                @dragend="pDragEnd($event)"
                :draggable="isDraggable"
              >
                <img
                  style="width: 20px; height: 20px"
                  src="../../../assets/imgEach/xiala.png"
                  alt=""
                />
                下拉框
              </div>
              <div
                @click="addFormItem(3)"
                class="l-section"
                @mousedown="addDraggable"
                @dragstart="addStartDrag(3)"
                @dragend="pDragEnd($event)"
                :draggable="isDraggable"
              >
                <img
                  style="width: 20px; height: 25px"
                  src="../../../assets/imgEach/file.png"
                  alt=""
                />
                文件上传
              </div>
              <div @click="addFormItem(4)" class="l-section" style="cursor: pointer" @mousedown="addDraggable"
                @dragstart="addStartDrag(4)" @dragend="pDragEnd($event)" :draggable="isDraggable">
                <img style="width: 20px;height:25px" src="../../../assets/imgEach/date.png" alt="">
                时间选择
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="g-form-box elCol-tow" :offset="1" :span="18">
          <!-- <div class="f-submit">
            <el-button type="primary"  @click="fSubmit">完成编辑</el-button>
          </div> -->
          <div
            class="drop-box"
            @dragover="pDragOver($event)"
            @dragstart="pDragStart($event)"
            @dragend="pDragEnd($event)"
            ref="parentNode"
          >
            <el-form ref="form" :model="formObj" label-width="80px">
              <div
                class="form-i input-div"
                v-for="(item, index) in formList"
                :key="item.key"
                @mousedown="addDraggable"
                :draggable="isDraggable"
                ref="items"
                :data-index="index"
              >
                <!-- 标题 -->

                <div
                  v-if="item.type != 99"
                  class="input-name"
                  style="margin: 10px 0; display: inline-block"
                >
                  <!-- <span style="color: red" v-if="item.required">*</span> -->
                  <!-- {{ index + 1 }} -->
                  {{ item.title ? item.title : "标题" }}
                  <!-- <span style="color: #aaa" v-if="item.type == 2">[多选框]</span> -->
                  <!-- <el-input class="form-t" type="text" v-model="item.title" :placeholder="item.tips"></el-input> -->
                </div>
                <div style="margin-left: 20px; display: inline-block">
                  <el-form-item label="">
                    <el-input
                      v-if="item.type == 6"
                      v-model="formObj.input"
                      placeholder="请输入内容"
                    ></el-input>
                  </el-form-item>
                  <!-- 单选按钮 -->
                  <el-form-item label="">
                    <el-radio-group
                      v-if="item.type == 1"
                      v-model="formObj.oneChange"
                      :disabled="index == editIndex"
                    >
                      <el-radio
                        v-for="(ritem, rindex) in item.list"
                        :key="'r' + index + rindex"
                        :label="ritem.val"
                        :style="
                          item.direction == 2 ? 'display:inline-block;' : ''
                        "
                      >
                        {{ ritem.text }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <!-- 多选按钮 -->
                  <el-form-item label="">
                    <el-checkbox-group
                      v-if="item.type == 2"
                      v-model="formObj.moreChange"
                    >
                      <el-checkbox
                        v-for="(citem, cindex) in item.list"
                        :key="'c' + index + cindex"
                        :label="citem.text"
                        :name="'c' + index"
                        :value="citem.val"
                        :style="
                          item.direction == 2 ? 'display:inline-block;' : ''
                        "
                      >
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <!-- 下拉框 -->
                  <!-- <el-select
                  v-if="item.type == 3"
                  v-model="item.value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(sitem, cindex) in item.list"
                    :key="'s' + index + cindex"
                    :label="sitem.text"
                    :value="sitem.val"
                  >
                  </el-option>
                </el-select> -->
                  <el-form-item label="">
                    <select id="sid" v-if="item.type == 3" class="s-select">
                      <option
                        v-for="(sitem, cindex) in item.list"
                        :key="'s' + index + cindex"
                        :label="sitem.text"
                        :value="sitem.val"
                      ></option>
                    </select>
                  </el-form-item>
                  <!-- 文件 -->
                  <el-form-item label="">
                    <div class="chooseFile" style="height: auto" v-if="item.type == 4">
                      <input
                        type="button"
                        id="uploadbtn"
                        value="选择文件"
                      /><input
                        type="button"
                        id="uploadfile"
                        style="display: none"
                        value="上传文件"
                      />
                      <input
                        type="file"
                        id="uploadpicker"
                        class="uploadpicker"
                        accept=""
                        style="display: none"
                        multiple
                      />
                      <input type="text" id="uploadtext" class="uploadtext" name="input1" accept="" style="display: none;">
                      <div>
                        <ul id="checkfileList"></ul>
                      </div>
                    </div>
                  </el-form-item>
                  <!-- <el-input
                      v-if="item.type == 5"
                      v-model="formObj.input"
                      placeholder="请输入内容"
                    ></el-input> -->
                  <!-- 时间 -->
                  <el-form-item label="">
                    <input v-if="item.type == 5" type="date" id="dateTime" class="input_time" value="">
                    <!-- <el-date-picker
                      v-if="item.type == 5"
                      v-model="formObj.time"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker> -->
                  </el-form-item>
                </div>
                <!-- 编辑弹窗 -->
                <div
                  class="f-edit"
                  v-if="editIndex != -1 && editIndex == index"
                >
                  <el-input
                    v-model="formList[editIndex].title"
                    placeholder="请输入标题"
                  ></el-input>
                  <el-checkbox v-model="formList[editIndex].required"
                    >必填</el-checkbox
                  >

                  <!-- <el-row style="background: rgb(232, 232, 232);text-align: center;padding: 10px 0;" -->
                  <el-row
                    style="
                      background: rgb(13, 45, 105);
                      border: 1px solid #5f5f90;
                      text-align: center;
                      padding: 10px 0;
                    "
                    v-if="tipVisibleShow"
                  >
                    <el-col :span="8"
                      >选项文字
                      <i
                        class="el-icon-sort"
                        style="color: #409eff"
                        @click="sortItemChild"
                      ></i
                    ></el-col>
                    <!-- <el-col :span="2">图片</el-col>
                  <el-col :span="2">说明</el-col> -->
                    <!-- <el-col :span="2">允许填空</el-col> -->
                    <el-col :span="2">默认</el-col>
                    <el-col :span="4">上移</el-col>
                    <el-col :span="4">下移</el-col>
                  </el-row>
                  <!-- <el-radio-group style="font-size:14px;display:block;" v-if="formList[editIndex].type == 1" v-model="formList[editIndex].value"> -->
                  <el-row
                    style="text-align: center; padding: 10px 0"
                    v-for="(it, index) in formList[editIndex].list"
                    :key="'edit' + index"
                    v-if="tipVisibleShow"
                  >
                    <el-col :span="8">
                      <el-input type="text" v-model="it.text"></el-input>
                    </el-col>
                    <!-- <el-col :span="2">
                    <i class="el-icon-picture-outline"></i>
                  </el-col>
                  <el-col :span="2">
                    <i class="el-icon-tickets"></i>
                  </el-col> -->
                    <el-col :span="2">
                      <!-- <el-radio :label="it.val"></el-radio> -->
                      <el-checkbox
                        @change="defaultChange(index, $event)"
                        :checked="formList[editIndex].value == it.val"
                        :disabled="
                          formList[editIndex].value == it.val
                            ? false
                            : formList[editIndex].value.toString() == ''
                            ? false
                            : true
                        "
                      >
                      </el-checkbox>
                    </el-col>
                    <el-col :span="4">
                      <i class="el-icon-top" @click="formMove(index, -1, 1)"
                        >↑</i
                      >
                    </el-col>
                    <el-col :span="4">
                      <i class="el-icon-bottom" @click="formMove(index, 1, 1)"
                        >↓</i
                      >
                    </el-col>
                  </el-row>
                  <el-row style="padding: 10px 0" v-if="tipVisibleShow">
                    <el-col :span="8">
                      <el-button type="primary" @click="addItemChild"
                        ><i class="el-icon-circle-plus-outline"></i>
                        添加选项</el-button
                      >
                    </el-col>
                    <!-- <el-col :offset="2" :span="4">
                    <el-select v-model="formList[editIndex].random">
                      <el-option :value="1" label="选项不随机"></el-option>
                      <el-option :value="2" label="选项随机"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :offset="2" :span="4">
                    <el-select v-model="formList[editIndex].direction">
                      <el-option :value="1" label="竖向排列"></el-option>
                      <el-option :value="2" label="横向排列"></el-option>
                    </el-select>
                  </el-col> -->
                  </el-row>
                  <!-- </el-radio-group> -->

                  <el-button
                    style="display: block; width: 100%"
                    type="warning"
                    @click="completeEdit"
                    >完成编辑</el-button
                  >
                </div>
                <div style="height: 40px">
                  <div class="form-b">
                    <el-button
                      @click="formEdit(index, item)"
                      icon="el-icon-edit-outline"
                      plain
                      >编辑</el-button
                    >
                    <el-button
                      @click="formDel(index)"
                      icon="el-icon-delete"
                      plain
                      >删除</el-button
                    >
                    <el-button
                      @click="formMove(index, -1)"
                      icon="el-icon-top"
                      plain
                      >上移</el-button
                    >
                    <el-button
                      @click="formMove(index, 1)"
                      icon="el-icon-bottom"
                      plain
                      >下移</el-button
                    >
                    <el-button
                      @click="formMove(index, 0)"
                      icon="el-icon-upload2"
                      plain
                      >最前</el-button
                    >
                    <el-button
                      @click="formMove(index, -2)"
                      icon="el-icon-download"
                      plain
                      >最后</el-button
                    >
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
     
<script>
// 1单选 2多选 3下拉框 4文件上传
const formItems = [
  {
    type: 1,
    title: "",
    tips: "请输入标题",
    required: true,
    value: 0,
    random: 1,
    direction: 1,
    list: [
      {
        text: "选项11",
        val: 0,
      },
      {
        text: "选项22",
        val: 1,
      },
    ],
  },
  {
    type: 2,
    title: "",
    tips: "请输入标题",
    required: true,
    value: [],
    random: 1,
    direction: 1,
    // list:['选项1','选项2']
    list: [
      {
        text: "选项11",
        val: 0,
      },
      {
        text: "选项22",
        val: 1,
      },
    ],
  },
  {
    type: 3,
    title: "",
    tips: "请输入标题",
    required: true,
    value: "",
    // list:['选项1','选项2']
    list: [
      {
        text: "选项33",
        val: 0,
      },
      {
        text: "选项44",
        val: 1,
      },
    ],
  },
  {
    type: 4,
    title: "文件上传",
    tips: "请选择文件",
    required: true,
    value: "",
  },
  {
    type: 5,
    title: "时间选择",
    tips: "请选择时间",
    required: true,
    value: "",
  },
  {
    type: 6,
    title: "",
    tips: "请输入标题",
    required: true,
    value: "",
    noChoice: "",
  },
];
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      fileListFile: [], //推送文件上传
      fileAction: "", //推送文件上传
      submitShow: false,
      interactiveVisible: false,
      formObj: {
        input: "",
        oneChange: "", //单选框
        moreChange: [], //多选框
        time: "",
        text: "",
      },
      tipVisibleShow: false,
      formList: [],
      shadow: false,
      isDraggable: false,
      moveIndex: -1, //添加新元素的表单类型
      draging: null, //被拖拽的对象
      target: null, //目标对象
      newdom: null, //新添加的对象

      editIndex: -1, //要编辑的对象的下标
      dataObj: {}, //点击下一步 传过来的数据
    };
  },
  mounted() {
    //为了防止火狐浏览器拖拽的时候以新标签打开
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  watch: {
    interactiveVisible(newVal, oldVal) {
      if (newVal === false) {
        console.log("interactiveVisible");
        this.formList = [];
      }
    },
  },
  created() {
    this.fileAction = this.$http.adornUrl(
      `cpcpdu/uploadImg?token=${this.$cookie.get("token")}`
    );
    // alert(this.fileAction);
  },
  methods: {
    init(data) {
      this.interactiveVisible = true;
      this.dataObj = data;
      console.log("this.dataObj=", this.dataObj);
    },
    // 拿起已有元素时
    pDragStart(event) {
      this.draging = event.target;
    },
    // 在可放置组件拖动时
    pDragOver(event) {
      console.log("drag move");
      this.target = event.target;
      let targetTop = event.target.getBoundingClientRect().top;

      // 拖动添加新元素时
      if (!this.draging) {
        let newDom = document.createElement("DIV");
        newDom.className = "form-i";
        newDom.style.height = "150px";
        newDom.style.background = "#aaaaaa";
        if (this.$refs.parentNode.childNodes.length == 0) {
          this.$refs.parentNode.appendChild(newDom);
        } else {
          this.target.parentNode.insertBefore(newDom, this.target);
        }

        this.draging = newDom;
        this.newdom = newDom;
      }

      let dragingTop = this.draging.getBoundingClientRect().top;
      if (this.target.className === "form-i" && this.target !== this.draging) {
        if (this.target) {
          if (this.target.animated) {
            return;
          }
        }

        if (this._index(this.draging) < this._index(this.target)) {
          this.target.parentNode.insertBefore(
            this.draging,
            this.target.nextSibling
          );
        } else {
          this.target.parentNode.insertBefore(this.draging, this.target);
        }
        this._anim(targetTop, this.target);
        this._anim(dragingTop, this.draging);
      }
    },
    // 动画
    _anim(startPos, dom) {
      let offset = startPos - dom.getBoundingClientRect().top;
      dom.style.transition = "none";
      dom.style.transform = `translateY(${offset}px)`;

      //触发重绘
      dom.offsetWidth;
      dom.style.transition = "transform .3s";
      dom.style.transform = ``;
      //触发重绘
      // setTimeout(()=>{
      //     dom.style.transition="transform .3s";
      //     dom.style.transform=``;
      // },0)
      clearTimeout(dom.animated);

      dom.animated = setTimeout(() => {
        dom.style.transition = "";
        dom.style.transform = ``;
        dom.animated = false;
      }, 300);
    },
    // 放下时
    pDragEnd() {
      console.log("drag end");
      this.isDraggable = false;
      let currentNodes = Array.from(this.$refs.parentNode.childNodes);
      console.log("=currentNodes=", currentNodes);
      console.log(this.target);
      let data = [];
      currentNodes.forEach((i) => {
        console.log("----", i.dataset.index);
        if (i.dataset.index == undefined) {
          console.log("11111111111", formItems[this.moveIndex]);
          let formItem = JSON.stringify(formItems[this.moveIndex]);
          console.log("11111111111", formItems[this.moveIndex]);
          formItem = JSON.parse(formItem);
          console.log("11111111111", formItems[this.moveIndex]);
          formItem.key = new Date().getTime();
          console.log("11111111111", formItems[this.moveIndex]);
          data.push(formItem);
          console.log("11111111111", formItems[this.moveIndex]);
          this.$refs.parentNode.removeChild(this.newdom);
        } else {
          console.log("22222222222222", formItems[this.moveIndex]);
          data.push(this.formList[i.dataset.index]);
        }
      });

      console.log(this.formList);
      this.formList = data;
    },
    // 获取索引
    _index(el) {
      let domData = Array.from(this.$refs.parentNode.childNodes);
      return domData.findIndex((i) => i.innerText == el.innerText);
    },

    // 添加组件拿起时
    addStartDrag(index) {
      this.moveIndex = index;
      console.log(index);
    },
    // 鼠标按下时 添加拖拽属性
    addDraggable() {
      // event.target.draggable = true

      // event.preventDefault();
      this.isDraggable = true;
      // this.$refs.item1.attributes('addDraggable',true)
    },

    // 添加表单项目
    addFormItem(type) {
      console.log(formItems[type]);
      // 复制表单对象
      let formItem = JSON.stringify(formItems[type]);
      formItem = JSON.parse(formItem);
      formItem.key = new Date().getTime();
      this.formList.push(formItem);
    },
    // 表单子项目排序
    sortItemChild() {
      this.formList[this.editIndex].list.reverse();
    },
    // 添加表单项目子项
    addItemChild() {
      let formItemChild = JSON.stringify(
        formItems[this.formList[this.editIndex].type]
      );
      formItemChild = JSON.parse(formItemChild);
      formItemChild.val = this.formList[this.editIndex].list.length;
      this.formList[this.editIndex].list.push(formItemChild);
    },
    // 修改默认值
    defaultChange(index, event) {
      console.log(index, event);
      if (event) {
        this.formList[this.editIndex].value = index;
      } else {
        this.formList[this.editIndex].value = "";
      }
    },
    // 移动表单组件
    formMove(index, m, type) {
      let list = [];

      if (type) {
        // 移动表单子项

        // this.formList[this.editIndex].value = ''
        list = this.formList[this.editIndex].list;
      } else {
        // 移动表单项

        list = this.formList;
      }

      let obj = list.splice(index, 1)[0];

      // 最前
      if (m == 0) {
        list.unshift(obj);
      }

      // 上移或下移
      if (m == 1 || m == -1) {
        list.splice(index + m, 0, obj);
      }

      // 最后
      if (m == -2) {
        list.push(obj);
      }
      console.log(list);
    },
    // 完成组件编辑
    completeEdit() {
      this.editIndex = -1;
    },
    // 编辑组件
    formEdit(index, item) {
      console.log(index);
      console.log(index, item.type, "title=", item.title);
      if (item.type === 4 || item.type === 5 || item.type === 6) {
        this.tipVisibleShow = false;
      } else {
        console.log(index, item.type, "title=", item.title);
        this.tipVisibleShow = true;
      }
      this.editIndex = index;
    },
    // 删除表单组件
    formDel(index) {
      this.formList.splice(index, 1);
    },
    _strMapToObj(strMap) {
      let obj = Object.create(null);
      for (let [k, v] of strMap) {
        obj[k] = v;
      }
      return obj;
    },
    /**
     *map转换为json
     */
    _mapToJson(map) {
      return JSON.stringify(this._strMapToObj(map));
    },
    // 提交
    fSubmit() {
      // console.log(this.formList);
      // console.log("----formObj", this.formObj);
      // console.log(this.$refs.parentNode);
      let map = new Map();
      let inputDivs = document.getElementsByClassName("input-div");
      // console.log("inputDivs==", inputDivs);
      // console.log("inputDivs==", inputDivs.length);
      // let inputName = ''
      for (let x = 0; x < inputDivs.length; x++) {
        let inputName = "input" + x;
        let title =
          inputDivs[x].getElementsByClassName("input-name")[0].innerText;
        // console.info(inputName, title);
        if (inputDivs[x].getElementsByTagName("input")[0]) {
          console.log("2135434645765785687788979808089");
          inputDivs[x]
            .getElementsByTagName("input")[0]
            .setAttribute("name", inputName);
        } else {
          inputDivs[x]
            .getElementsByTagName("select")[0]
            .setAttribute("name", inputName);
        }
        // console.log(
        //   "=================",
        //   inputDivs[x].getElementsByTagName("input")
        // );
        if (inputDivs[x].getElementsByTagName("input").length !== 0) {
          let inputType = inputDivs[x].getElementsByTagName("input")[0].type;
          console.log("inputType==", inputType);
          if (inputType == "radio") {
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let y = 0; y < inputs.length; y++) {
              inputs[y].setAttribute("name", inputName);
            }
          }

          if (inputType == "checkbox") {
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let y = 0; y < inputs.length; y++) {
              inputs[y].setAttribute("name", inputName);
            }
          }
          if (inputType == "button") {
            console.log("qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq");
            let inputs = inputDivs[x].getElementsByClassName("uploadtext");
            console.log("======================",inputs);
            for (let z = 0; z < inputs.length; z++) {
              // console.log("===11111111111111111",inputs[z.length-1]);
              inputs[z].setAttribute("name", inputName);
            }
          }
          if (inputType == "date"){
            console.log("dsdddddddddddddd");
            // console.log("======",document.getElementById("dateTime"));
            console.log("======",inputDivs[x].getElementsByTagName("input"));
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let q = 0; q < inputs.length; q++) {
              console.log("sdddddddddddddddd",inputs[q]);
              inputs[q].setAttribute("name", inputName);
              inputs[q].setAttribute("class", inputName + " input_time");
              // document.getElementById("dateTime").classList.add(inputName);
              inputs[q].setAttribute("onclick", `singleDate(${inputName})`);
            }
          }
        } else {
          let sid = document.getElementById("sid").childNodes;
          console.log("sid===", sid);
          for (let z = 0; z < sid.length; z++) {
            sid[z].setAttribute("name", inputName);
          }
        }

        // if(inputDivs[x].getElementsByTagName("input")[0].type === 'text'){
        //   inputName = "input" + x;
        // }else if(inputDivs[x].getElementsByTagName("input")[0].type === 'radio'){
        //   console.log("=el-radio=",document.getElementsByClassName("el-radio"));
        //   let elRadio = document.getElementsByClassName("el-radio")
        //   for (let index = 0; index < elRadio.length; elRadio++) {
        //       const element = elRadio[index];
        //       console.log("element==",element);
        //     }
        //   inputName = "radio" + x;
        // }else if(inputDivs[x].getElementsByTagName("input")[0].type === 'file'){
        //   inputName = "file" + x;
        // }

        // console.info(
        //   "inputDivs[x]",
        //   inputDivs[x].getElementsByTagName("input")[0]
        // );
        // console.info(
        //   "inputDivs[x]",
        //   inputDivs[x].getElementsByTagName("input")[0].type
        // );
        // console.info("inputDivs[x]",inputDivs[x].getElementsByTagName("input")[0].setAttribute("name", inputName));
        map.set(inputName, title);
        console.info(map);
        // arr.push(a);
        // input-name
      }
      console.info(map);
      console.info(this._mapToJson(map));
      let tempElement = this._mapToJson(map);
      let xxx = document.getElementsByClassName("form-b");
      for (let index = 0; index < xxx.length; index++) {
        const element = xxx[index];
        element.style.display = "none";
      }
      let html = this.$refs.parentNode.outerHTML;

      console.log(html);
      let one = html
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "'");
      // let newHtml = one
      // console.log("============");
      console.log("============", formItems);
      console.log("============", this.formList);
      let dataList = [];
      this.formList.forEach((item, index) => {
        let objNew = {};
        // console.log("item==", item);
        // console.log("-------map====", map);
        let barDataTow = [];
        //将map数据改为数组对象
        map.forEach((aa, nn) => {
          let objNew = {};
          // console.log("aa==",aa);
          // console.log("nn==",nn);
          objNew.key = nn;
          objNew.value = aa;
          barDataTow.push(objNew);
        });
        console.log("barDataTow===", barDataTow);
        //判断map里面的数据和this.formList title和value是否相同 如果相同，将map里面的input填给新对象objNew
        barDataTow.forEach((aaa, index) => {
          console.log("--------------", item);
          if (item.title === aaa.value) {
            objNew.input = aaa.key;
          }
        });
        objNew.title = item.title;
        objNew.value = item.value;
        //判断是输入框还是其他控件 输入框的type = 6 ，多选框的type = 2，文件上传的type = 4，时间框的type = 5，给新对象objNew添加type属性
        //这些值都是直接获取到值，
        if (item.type === 6 || item.type === 2 || item.type === 4 || item.type === 5) {
          objNew.type = 0;
        } else {
          // 下拉框 type = 3，单选框 type = 1
          objNew.type = 1;
        }
        let acs = [];
        //循环this.formList里面的list数据，表示多选/单选/下拉数据 循环text val 添加给新对象objNew
        if (item.list) {
          item.list.forEach((aaa) => {
            let ooo = {};
            ooo.text = aaa.text;
            ooo.val = aaa.val;
            acs.push(ooo);
          });
          objNew.list = acs;
        } else {
          objNew.list = [];
        }
        dataList.push(objNew);
      });
      console.log("====================", dataList);
      // let tempElementDesc = JSON.stringify(this.formList)
      let tempElementDesc = JSON.stringify(dataList);
      // console.log(one);
      let tempDoc = one;
      // return;
      this.getToHtml(tempElement, tempDoc, tempElementDesc);
      // let xxx = document.getElementsByClassName('form-b')
      // console.log("xxx=",xxx);
      // console.log("xxx=",typeof xxx);
      // xxx[0].style.visibility = 'hidden';
      // console.log("xxx=",xxx);
      // console.log(this.$refs.qqqqqq.outerHTML);
      // this.$refs.qqqqqq.innerHTML = this.$refs.parentNode.outerHTML
    },
    getToHtml(tempElement, tempDoc, tempElementDesc) {
      // console.log("str===",str);
      console.log("this.this.dataObj==", this.dataObj);
      console.log("tempElement==", tempElement);
      console.log("tempDoc==", tempDoc);
      console.log("tempElementDesc==", tempElementDesc);
      // return
      if (this.dataObj.id === 0) {
        console.log("新增");
        this.$http({
          url: this.$http.adornUrl("htmlTemp/save"),
          // url: this.$http.adornUrl(`/htmlTemp/${this.dataObj.id === 0 ? 'save' : 'update'}`),
          method: "post",
          data: this.$http.adornData({
            tempElement: tempElement,
            tempDoc: tempDoc,
            tempElementDesc: tempElementDesc,
            tempName: this.dataObj.tempName,
            remark: this.dataObj.remark,
            imgUrls:this.dataObj.imgUrls,
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success("操作成功");
            this.$emit("refEachOther");
            this.interactiveVisible = false;
            this.formList = [];
          } else {
            this.$message.error(data.msg);
          }
        });
      } else {
        console.log("编辑");
        // return
        this.$http({
          url: this.$http.adornUrl("htmlTemp/update"),
          // url: this.$http.adornUrl(`/htmlTemp/${this.dataObj.id === 0 ? 'save' : 'update'}`),
          method: "post",
          data: this.$http.adornData({
            id: this.dataObj.id.id,
            tempElement: tempElement,
            tempDoc: tempDoc,
            state: this.dataObj.state,
            tempName: this.dataObj.tempName,
            remark: this.dataObj.remark,
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success("操作成功");
            this.$emit("refEachOther");
            this.interactiveVisible = false;
            this.formList = [];
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
  },
};
</script>
<style ></style>